<template>
  <div class="goodsmap">
    <el-input placeholder="图片地址" v-model="imgUrl" class="input-with-select">
      <el-button slot="append" type="primary" @click="handleUpImg">更新</el-button>
    </el-input>
    <div class="show">
      <img :src="imgUrl" />
    </div>
  </div>
</template>

<script>
import DB from '../axios/db'
export default {
  name: 'goodsmap',
  data () {
    return {
      imgUrl: ''
    }
  },
  created () {
    this.$Variable.userLogin()
    this.getImg()
  },
  methods: {
    // 获取图片
    getImg () {
      const _this = this
      DB.getImg().then(res => {
        // console.log(res.data)
        _this.imgUrl = res.data.img_path || '//static.zcool.cn/git_z/build/images/null-page-draw.png'
      })
    },
    // 更新图片
    handleUpImg () {
      const _this = this
      console.log(this.imgUrl)
      DB.upImg({img_path: _this.imgUrl}).then(res => {
        // console.log(res)
        if (res.code === 0) {
          _this.$message({
            message: res.message || '更新成功',
            type: 'success'
          })
        } else {
          _this.$message({
            message: res.message || '更新失败',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.goodsmap {
  .show {
    width: 100%;
    margin: auto;
    text-align: center;
    padding: 10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    img {
      display: inline-block;
      max-width: 100%;
    }
  }
}
</style>
